<template>
<div>
<!-- banner 头部 -->
  <div class="banner" :style="cover">
    <h1 class="banner-title">归 档</h1>
  </div>
<!-- 归档列表 -->
  <v-card class="blog-container">
    <Timeline>
      <timeline-title>目前共计 <b>{{ count }}</b> 篇文章，继续创作吧^_^ </timeline-title>
      <timeline-item  bg-color="#9dd8e0" :hollow="true" v-for="item of archiveList" :key="item.id">
      <!-- 日期 -->
        <span class="time">{{ item.createTime | date }}</span>
      <!-- 文章标题 -->
        <router-link :to="'/articles/' + item.id" style="color: #666;text-decoration: none">
          {{ item.articleTitle }}
        </router-link>
      </timeline-item>
    </Timeline>
    <!-- 分页按钮 -->
    <v-pagination
      color="#00C4B6"
      v-model="current"
      :length="Math.ceil( count / 10 )"
      total-visible="7"
      />
  </v-card>
</div>
</template>

<script>
import {Timeline, TimelineItem, TimelineTitle} from "vue-cute-timeline"
import {getArchivesList} from "@/api/article";
export default {
  name: "Archive",
  components:{
    Timeline,
    TimelineItem,
    TimelineTitle
  },
  created() {
    this.listArchives()
  },
  data(){
    return{
      current:1,
      count:0,
      archiveList:[]
    }
  },
  methods:{
    listArchives() {
      getArchivesList({current:this.current}).then(({data}) => {
        this.archiveList = data.data.recordList
        this.count = data.data.count
      })
    }
  },
  computed:{
    cover(){
      let cover = ""
      this.$store.state.blogInfo.pageList.forEach(item => {
        if (item.pageLabel == "archive") {
          cover = item.pageCover
        }
      })
      return "background: url(" + cover + ") center center / cover no-repeat"
    }
  },
  watch:{
    current(value) {
      getArchivesList({current:value}).then(({data}) => {
        this.archiveList = data.data.recordList
        this.count = data.data.count
      })
    }
  }
}
</script>

<style scoped>
.time {
  font-size: 0.75rem;
  color: #555;
  margin-right: 1rem;
}
</style>
